 <meta charset="utf-8">
 <div class="card" id="biz_deviceVedioMonitor_conatainer" style="padding-bottom: 0px;">
   
 <div class="card">
 	<div class="card-body">
 	<div class="row">
 	
 	
 	  <div class="col-md-2" id="list_div_device" style="width: 0px;">
             <div class="table-responsive">
                                            <table class="table mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>
	                                                        <form  class="mb-4">
		                                                    <input type="text" class="form-control new-event-form" placeholder="输入关键词查询..." />
		                                                </form>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="(device,index) in deviceList">
                                                        <td><button class="btn btn-outline btn-primary btn-block" 
                                                        v-on:click="loadDeviceChannels(device)">{{device.name}}
                                                        </button></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <a href="#" v-on:click="addNewDevice" class="btn btn-danger btn-block ">
                                            	<i class="mdi mdi-plus mr-1"></i>添加新设备监控
                                            </a>   
             </div>
 	  </div>
 	  
 	  <div class="col-md-2"  id="list_div_channel">
 	  

  									<div class="card h-100">
                                    <div class="card-body email-leftbar">
                                        <a href="#" class="btn btn-danger btn-block btn-rounded waves-effect waves-light" v-on:click="doCcollapse">
                                        <i class="mdi  mr-1"></i> {{nowDevice.name}}</a>

                                        <div class="mail-list mt-4">
                                            <div  v-for="(item,index) in channelList " 
                                           		  v-on:click="loadChannelVideo(item)" >
                                            
                                            <span >
                                            <a href="#" v-bind:class="{active:item.id==nowChannel.id }"
                                            		   ><!--  v-on:click="loadChannelVideo(item)" -->
                                            	<i class="mdi mdi-inbox mr-2"></i> {{item.name}}
                                            </a>
                                            </span>
                                            <span><!--  v-bind:change="checkChannel(item)"  -->
                                            <input type="checkbox"  
	                                               v-model="selectedChannelList"
												   v-bind:value="item.id"
						                           v-bind:checked="item.selected"
	                                              style="margin-top: -20px;float: right;zoom:130%;">
                                            </span>
                                            
                                            </div>
                                            
                                             
                                        </div>
                                    </div>
                                </div>
                                        
                           
                                        
                                        
 	  </div>
 	  
 	  
 	      <div class="col-md-6">
 	  
 	  			<div class="row">
                            <div class="col-xl-6"  v-for="(item,index) in selectedChannelList ">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title">监控视频线路{{index+1}}</h4>
                                        <div class="embed-responsive embed-responsive-16by9" style="overflow: hidden;border: 0px;">
                                            <iframe class="embed-responsive-item"  v-bind:src="selectedChannelUrlList[index]"  style="overflow: hidden;border: 0px;"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- end col -->
        
                          
                 </div>
                                        
 	  </div>
 	  
 	  
 	
 	</div>
 	</div>
 	</div>
 	
 </div>
<script>
var anewaz=new Vue({  
	  el: '#biz_deviceVedioMonitor_conatainer', 
	  data:{
		  searchForm:{
			  name: null,
			  status: null
		  },
		  nowDevice:{},
		  deviceList:[],
		  channelList:[],
		  nowChannel:{},
		  
		  selectedChannelList:[],
		  
		  selectedChannelUrlList:[],
		  
		  lineVedios:[],
	      bus:new Vue()
	  },
	  mounted:function(){
		 var _this=this;
		 _this.loadMonitorDevice();
	  },

    methods: {
    	loadMonitorDevice: function(){
	  		 var　_this=this;
	  		 var url="/manager/monitor/loadMonitorDevice";
			    zfesAjax.ajaxTodo(url, {}, function(data) {
					_this.deviceList=data.data.dataSet.rows;
					if(_this.deviceList&&_this.deviceList.length>0){
						_this.nowDevice=_this.deviceList[0];
						_this.loadDeviceChannels(_this.nowDevice);
					}
					
				});
	 	 },
	 	addNewDevice: function(){
	 		var _this=this;
  			var url="/view/device/config/device.solution.select.html";
  			zfesLayerEditDg.open(url,{deviceId:_this.deviceId},"编辑",460,function(){_this.loadSolutionsDeviceConfiged();}); 
	 	 },
	 	 
	 	loadDeviceChannels: function(device){
	 		 var　_this=this;
	 		_this.nowDevice=device;
	 		var url="/manager/vedio/loadVediosByDeviceId";
	 		zfesAjax.ajaxTodo(url, {deviceId: device.id}, function(data) {
				_this.channelList=data.data.vedioList;
				if(_this.channelList&&_this.channelList.length>0){
					_this.nowChannel=_this.channelList[0];
				}
				
			});
	 	},
	 	
	 	loadChannelVideo: function(channel){
	 		 var　_this=this;
	 		_this.nowChannel=channel;
	 		_this.selectedChannelUrlList=[];
	 		_this.selectedChannelList.forEach((item,index,array)=>{
	 			_this.selectedChannelUrlList[index]="view/device/vedioscontent.html?vid="+item;
	 		})
	 		
	 		//selectedChannelUrlList=[];
	 		
	 		 //alert("2+"+channel.id);
	 	},
	 	doCcollapse:function(){
	 		alert(0);
	 		$("#list_div_device").css("display","none");
	 		$("#list_div_channel").css("display","none");
	 		
	 	}
	  
   }

});

function showDetail(row){
	anewaz.showDetail(row);
}
</script>


